<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 新增按钮说明文字 -->
        <div class="btn_wrapper">
          <span style="font-size: 12px; color: pink"
            >说明：目前支持学科和关键字条件筛选</span
          >
          <el-button
            @click="change(id)"
            type="button"
            class="el-button el-button--success el-button--small"
          >
            <i class="el-icon-edit"></i>
            <span>新增试题</span>
          </el-button>
        </div>
        <!-- 表单456 -->
        <el-form ref="addForm" label-width="95px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" prop="subject">
                <el-select v-model="userInfo.subject" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.subject"
                    :value="item.subject"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="目录" prop="catalog">
                <el-select v-model="userInfo.catalogID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.catalog"
                    :value="item.catalog"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="userInfo.tags" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.tags"
                    :value="item.tags"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword">
                <el-input
                  v-model="Qu_list.keyword"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="userInfo.questionType" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.questionType"
                    :value="item.questionType"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="userInfo.difficulty" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.difficulty"
                    :value="item.difficulty"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="userInfo.direction" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.direction"
                    :value="item.direction"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="userInfo.creatorID" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in Qu_list"
                    :key="index"
                    :label="item.creator"
                    :value="item.creator"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input
                  v-model="Qu_list.remarks"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="enterprise">
                <el-input
                  v-model="userInfo.enterprise"
                  style="width: 220px"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="城市"
                prop="province"
                class="city"
                @change.native="getArea"
              >
                <el-select v-model="userInfo.province" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in provincesList"
                    :key="i"
                    :label="item.city"
                    :value="item.city"
                  ></el-option>
                </el-select>
                <el-select v-model="userInfo.city" placeholder="请选择">
                  <el-option
                    v-for="(item, i) in cityList"
                    :key="i"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <div class="el-form-item__content">
                <el-button @click="eliminate"> 清除 </el-button>
                <el-button type="primary" @click="search"> 搜索 </el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <!-- 数据 -->
        <div role="alert" class="el-alert alert el-alert--info is-light">
          <el-alert
            :title="`数据一共${total}条`"
            type="info"
            :closable="false"
            show-icon
          ></el-alert>
        </div>
        <!-- 表格 -->
        <el-table class="Table" :data="Qu_list" border style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="120">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
            <template #default="scoped">
              <p v-if="scoped.row.questionType == 1">单选</p>
              <p v-else-if="scoped.row.questionType == 2">多选</p>
              <p v-else-if="scoped.row.questionType == 3">简答</p>
            </template>
          </el-table-column>
          <el-table-column prop="question" label="题干" width="120">
            <template #default="scoped">
              <p v-html="scoped.row.question">简单</p>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200">
            <template #default="scoped">
              {{ fromTime(scoped.row.addDate) }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
            <template #default="scoped">
              <p v-if="scoped.row.difficulty == 1">简单</p>
              <p v-else-if="scoped.row.difficulty == 2">一般</p>
              <p v-else-if="scoped.row.difficulty == 3">困难</p>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="140">
          </el-table-column>
          <el-table-column prop="operation" label="操作" width="196">
            <template #default="scope">
              <el-row>
                <!-- 预览icon图标 -->
                <el-button
                  class="smallIcons1"
                  type="info"
                  icon="el-icon-view"
                  circle
                  @click="preview(scope.row.id)"
                >
                </el-button>
                <!-- 修改icon图标 -->
                <el-button
                  class="smallIcons2"
                  type="primary"
                  icon="el-icon-edit"
                  @click="change(scope.row.id)"
                  circle
                ></el-button>
                <!-- 删除icon图标 -->
                <el-button
                  @click="delRandomsList(scope.row)"
                  class="smallIcons3"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
                <!-- 加入精选icon图标 -->
                <el-button
                  @click="selected(scope.row)"
                  class="smallIcons4"
                  type="success"
                  icon="el-icon-check"
                  circle
                ></el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <el-pagination
          style="text-align: right; margin-top: 20px; margin-bottom: 15px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="query.page"
          :page-sizes="[10, 20, 30]"
          :page-size="query.pagesize"
          layout="prev, pager, next, sizes, jumper"
          background
          :total="total"
        >
        </el-pagination>
      </el-card>
      <!-- 预览组件 -->
      <Perview
        :dialogVisible="dialogVisible"
        @close="dialogVisible = false"
        :questionItem="questionItem"
      />
    </div>
  </div>
</template>

<script>
// 引入预览组件
import Perview from '../components/questions-preview.vue'
import { datas } from '@/api/hmmm/citys.js'
import { list, remove, detail, choiceAdd } from '@/api/hmmm/questions.js'
export default {
  name: 'questions',
  data () {
    return {
      // 城市
      provincesList: datas,
      // 地区
      cityList: {},
      // 列表数据
      Qu_list: [],
      // 分页器数据
      query: {
        page: 1,
        pagesize: 10
      },
      total: 0,
      // from表单数据
      userInfo: {
        // 学科
        subjectID: '',
        // 目录
        catalog: '',
        // 标签
        tags: '',
        // 关键字
        keyword: '',
        // 试题类型
        questionType: '',
        // 录入人
        creator: '',
        // 题目备注
        remarks: '',
        // 企业简称
        enterprise: '',
        // 城市
        city: '',
        // 省份
        province: ''
      },
      // 预览组件： 预览默认关闭
      dialogVisible: false,
      questionItem: {}
      // 分页默认条数
    }
  },
  // 注册组件
  components: {
    Perview
  },
  // 钩子函数
  mounted () {
    this.getList()
  },
  watch: {
    // 监视城市变化
    'userInfo.province': function () {
      this.getArea()
    }
  },
  // 方法
  methods: {
    // 城市联动
    getArea () {
      let citys = []
      this.provincesList.forEach(item => {
        // console.log(item.city)
        if (item.city === this.userInfo.province) {
          citys = item
        }
      })
      if (citys) {
        this.cityList = citys.area
      }
    },
    // 预览
    async preview (id) {
      try {
        const { data } = await detail({ id })
        this.questionItem = data
        this.dialogVisible = true
      } catch (error) {
        this.$message.info('数据未找到')
        return error
      }
    },
    // 获取列表数据
    async getList () {
      const res = await list(this.query)
      this.Qu_list = res.data.items
      this.userInfo = res.data.items
      this.total = res.data.counts
    },
    // 时间格式化
    fromTime (timer) {
      // console.log(timer)
      var jsonDate = new Date(timer).toJSON()
      return new Date(new Date(jsonDate) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, ' ')
        .replace(/\.[\d]{3}Z/, '')
    },
    // 跳转到新增和修改
    change (id) {
      this.$router.push({ path: '/questions/new', query: { id: id } })
    },
    // 删除
    async delRandomsList (row) {
      try {
        await this.$confirm('确定要删除此项内容吗?', '提示', {
          type: 'warning'
        })
        await remove(row)
        // 删除完成重新获取列表
        this.getList()
        if (this.Qu_list.length === 1 && this.Qu_list.page > 1) {
          this.Qu_list.page--
        }
        this.$message.success('删除成功!')
      } catch (error) {
      }
    },
    // 加入精选题库
    selected (state) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({ id: state.id, choiceState: 1 })
        this.getList()// 获取列表
        this.$message({
          type: 'success',
          message: '加入成功'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消'
        })
      })
    },
    // // 清除
    eliminate () {
      this.query.subject = '' // 学科1
      this.query.catalog = '' // 目录
      this.query.tags = '' // 标签
      this.query.keyword = '' // 关键字
      this.query.questionType = '' // 试题类型
      this.query.creator = '' // 录入人
      this.query.remarks = '' // 题目备注
      this.query.enterprise = '' // 企业简称
      this.query.city = '' // 城市
      this.query.province = '' // 省份
      this.query.page = 1
      this.getList()
    },
    // 搜索按钮
    search () {
      const list = []
      this.Qu_list.forEach(item => {
        if (this.userInfo.subject === item.subject) {
          list.push(item)
        }
      })
      // this.query.page = 1
      // this.getList()
      console.log(this.Qu_list)
      this.Qu_list = list
    },
    // 分页
    // 页码变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.query.page = 1
      this.getList()// 获取列表
    },
    // 点击切
    handleCurrentChange (val) {
      this.query.page = val
      this.getList()// 获取列表
    }
  }
}
</script>

<style lang="scss" scoped>
.btn_wrapper {
  display: flex;
  justify-content: space-between;
}
.el-row {
  margin-top: 10px;
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.el-form-item__content {
  padding-left: 164px;
  font-size: 12px;
}
::v-deep.el-table--border th {
  border-right: 0px solid #ebeef5;
}
.Table {
  margin-top: 10px;
}
.smallIcons1 {
  padding: 8px;
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
.smallIcons2 {
  padding: 8px;
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.smallIcons3 {
  padding: 8px;
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
}
.smallIcons4 {
  padding: 8px;
  color: #e6a23c;
  background: #fdf6ec;
  border-color: #f5dab1;
}
.el-pagination {
  margin-top: 15px;
}
// 城市输入框
::v-deep .city {
  .el-input__inner {
    width: 106px;
    margin-right: 3px;
  }
}
</style>
